<template>
  <label class="r-checkbox">
    <span class="r-checkbox--outer">
      <span
        class="r-checkbox--inner"
        :class="{ 'is-checked': isChecked }"
      ></span>
      <input
        type="checkbox"
        class="r-checkbox-native"
        :value="label"
        v-model="CKValue"
      />
    </span>
    <span class="checkbox__label">{{ label }}</span>
  </label>
</template>

<script>
export default {
  name: "w-checkbox",
  props: {
    label: {
      type: String,
    },
    value: {
      type: [Boolean, Array],
    },
  },
  computed: {
    CKValue: {
      get() {
        return this.isGroup ? this.CKGroup.value : this.value;
      },
      set(value) {
        if (this.isGroup) {
          this.CKGroup.$emit("input", value);
        } else {
          this.$emit("input", value);
        }
      },
    },
    isChecked() {
      console.log(1111111111111111);
      console.log(this.value);
      if (this.isGroup) {
        return this.CKGroup.value.includes(this.label);
      } else {
        if (typeof this.value === "boolean") {
          return this.value;
        }
        return this.value.includes(this.label);
      }
    },
    isGroup() {
        console.log("isGroup");
        console.log(this.CKGroup);
      return this.CKGroup;
    },
  },
  inject: {
    CKGroup: {
      default: "",
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang='css' scoped>
@import "./checkBox.css";
</style>